<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>顾客列表</title>
    <link rel="stylesheet" href="css/styles1.css">
</head>
<body>
<div class="" id="app">
    <div class="header">
        <h1 class="h1">顾客列表</h1>
    </div>
    <div class="category-bar">
        <button class="category" data-type="all" onclick="getAll(0)">全部</button>
        <button class="category" data-type="premium" onclick="getAll(1)">优质客</button>
        <button class="category" data-type="inactive" onclick="getAll(3)">静止客</button>
    </div>
    <div class="sub-category-bar">
        <button class="sub-category" onclick="filterData(0)">来店时间
            <img src="static/down.png" class="arrow" onclick="toggleArrow(this)">
        </button>
        <button class="sub-category" onclick="filterData(1)">客单价
            <img src="static/down.png" class="arrow" onclick="toggleArrow(this)">
        </button>
        <button class="sub-category" onclick="filterData(2)">来店频率
            <img src="static/down.png" class="arrow" onclick="toggleArrow(this)">
        </button>
        <button class="sub-category" onclick="filterData(3)">消费总额
            <img src="static/down.png" class="arrow" onclick="toggleArrow(this)">
        </button>
        <button class="sub-category" onclick="filterData(4)">最近添加
            <img src="static/down.png" class="arrow" onclick="toggleArrow(this)">
        </button>
    </div>

    <main>
        <div class="contact-list" id="data-container">
            <div class="customer" v-for="customer in customers" :key="customer.id">
                <img src="customer.avator" alt="" class="avatarimg" onclick="showUserDetails('${encodeURIComponent(JSON.stringify(eleData))}')">
                <div class="info">
                    <h2>{{ customer.name }}<img src="customer.sex === 'F' ? 'static/woman.jpg' : 'static/man.webp'" alt="" class="small-icon"></h2>
                    <div class="details">
                        <p>电话: {{ customer.mobile }}</p>
                        <p class="extra-info"><img src="static/contactman.jpg" alt="" class="small-icon1">联系人: {{ customer.contacts ? customer.contacts.join('、') : '无' }}</p>
                    </div>
                </div>
                <div class="last-message">
                    <img src="static/phone.jpg" alt="电话图像" class="phone-icon" data-phone="${eleData.mobile}" onclick="showModal(this)">
                    <p>上次消费：{{ formatDate(customer.lastconsumetime) }}</p>
                </div>
            </div>`;
        </div>
    </main>



    <!-- 模态框结构 -->
    <div id="modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <p id="phone-number"></p>
            <button id="call-button">拨打</button>
            <button id="cancel-button">取消</button>
        </div>
    </div>

    <!-- 用户信息模态框 -->
    <div id="userModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <div id="user-details"></div>
        </div>
    </div>

</div>
<script src="js/index.js"></script>
</body>
</html> 